.blog-details-banner{
    width: 100%;
    margin: 0 auto;
    
    .banner-main{
        position: relative;
        background:url(../img/blog-details-banner5.jpg) ;
        background-size: 100% auto;
        width: 100%;
        height: 500px;
        margin: 0 auto;
        
        .main-pre{
          position: absolute;
          top: 50%;
          margin-top: -60px;
          left: 30px;  
          width: 40px;
          height: 60px;
          z-index: 10;
          background: url(../img/icon-arrow.png) 0px 0px;
          cursor: pointer;
        }
        
        .main-next{
          position: absolute;
          top: 50%;
          margin-top: -60px;
          right: 30px;  
          width: 40px;
          height: 60px;
          z-index: 10;
          background: url(../img/icon-arrow.png) -38px 0px;
          cursor: pointer;
        }
        
        .main-cycle{
            position: absolute;
            bottom: 5%;
            left: 20%;
            z-index: 10;
            
            .cycle-current{
                background: white;
            }
            
            .cycle-nocurrent{
                border: 1px solid white;
                background: none;
            }
        }
        
        .main-cycle li{
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            border: 1px solid white;
            margin-right: 10px;
            cursor: pointer;
        }
    }
}

.blog-details-content{
    width: 100%;
    max-width: 1250px;
    margin: 50px auto;
    position: relative;
    
    .content-left{
        width: 63%;
        
        .left-center{
            width: 82%;
            margin: 30px auto;
            position: relative;
            
            .blog-details-p{
                position: absolute;
                top: 0px;
                left: 50px;
                
                .left-center-text{
                    font-size: 14px;
                    color: #CECED8;
                }
            }
            
            .blog-details-p p{
                font-size: 22px;
                color: #00C0F1;
                line-height: 24px;
            } 
        }
        
        .left-p-inner{
            width: 100%;
            margin: 0 auto;
            padding: 30px 0px;
        }
        
        .left-p-inner p{
            font-size: 14px;
            color: #BCBFC6;
            line-height: 24px;
        }
    }
    
    .content-right{
        width: 25%;
        height: 200px;
        position: absolute;
        right: 3%;
        top: 0px;
        
        .right-item{
            width: 100%;
            height: 20px;
            position: relative;
            margin-bottom:20px;
            
            .right-item-img{
                position: absolute;
                top: 0px;
                left: 0px;
            }
            .item-p{
                position: absolute;
                top:0px ;
                left: 30px;
                font-size: 14px;
                color: #DFE0E5;
            }
            
            .item-p span{
                font-size: 14px;
                color: #9799A6;
            }
        }
        
        .right-bg{
            width: 75%;
            height: 260px;
            background: #FAFAFA;
            border-radius: 15px;
            padding: 30px 30px;
            position: relative;
            
            .bg-cycle-item{
                width: 70px;
                height: 70px;
                border-radius: 100%;
                background: #EBEBEB;
            }
            
            .bg-item-text{
                font-size: 14px;
                font-weight: bold;
                color: #30364E;
                position: absolute;
                top: 45px;
                left: 120px;
            }
            
            .bg-admin{
                font-size: 12px;
                color: white;
                width: 50px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background: #CADB35;
                position: absolute;
                top: 70px;
                left: 120px;
            }
            
            .bg-menu-list{
                width: 100%;
                position: absolute;
                bottom: 20px;
            }
            
            .bg-menu-list li{
                float: left;
                margin-right: 10px;
            }
        }
        
        .right-bg p{
            font-size: 14px;
            color: #9698A5;   
            line-height: 24px;
        }
        
        .right-bg a{
            font-size: 14px;
            color: #00BEF2;
        }
        
        .right-bg a:hover{
            text-decoration: underline;
            color: #00BEF2;
        }
    }
    
    .content-left span{
        font-size: 22px;
        color: #31364C;
    }
    
    .content-left p{
        font-size: 14px;
        color: #BCBFC6;
        line-height: 24px;
    } 
}

.blog-details-item{
    width: 100%;
    height: 50px;
    background: #F5F5F5;
    overflow: hidden;
    
    .item-inner{
        width: 100%;
        max-width: 1250px;
        height: 100%;
        margin: 0 auto;
        line-height: 50px;
        color: #9698A5;
    }
    
    .item-inner a{
        color: #22C5F0;
    }
}

.blog-details-main{
    width: 100%;
    max-width: 1250px;
    margin: 20px auto;
    
    .main-top{
        width: 60%;
    }
    
    .main-top span{
        font-size: 22px;
        color: #2F374C;
    }
    
    .main-top p{
        font-size: 14px;
        color: #9599A4;
        line-height: 22px;
    }
    
    .main-img{
        width: 100%;
        margin: 30px auto;
        cursor: pointer;
    }
    
    .main-img img{
        transition: transform 1s;
        overflow: hidden;
    }
    
    .main-img li:hover img{
        transform: scale(1.2,1.2);
    }
    
    .main-img li{
        width: 50%;
        float: left; 
        position: relative;  
        overflow: hidden;
    }
    
    .img-link{
        position: absolute;
        bottom: 30px;
        left: 30px;
        opacity: 0;
        z-index: 10;
    }
    
    .img-link a{
       color: white;
    }
    
    .main-img li:hover .img-link{
        opacity: 1;
        transition:0.5s;
    }    
    
    .main-img img{
        max-width: 100%;
        height: auto;
    }
}

@media screen and (min-width:768px) and (max-width:1024px){
    .blog-details-banner{
        width: 100%;
        margin: 0 auto;
        
        .banner-main{
            position: relative;
            background:url(../img/blog-details-banner5.jpg) ;
            background-size: 100% auto;
            width: 100%;
            height: 500px;
            margin: 0 auto;
            
            .main-pre{
              position: absolute;
              top: 50%;
              margin-top: -40px;
              left: 30px;  
              width: 40px;
              height: 60px;
              z-index: 10;
              background: url(../img/icon-arrow.png) 0px 0px;
              cursor: pointer;
            }
            
            .main-next{
              position: absolute;
              top: 50%;
              margin-top: -40px;
              right: 30px;  
              width: 40px;
              height: 60px;
              z-index: 10;
              background: url(../img/icon-arrow.png) -38px 0px;
              cursor: pointer;
            }
        }
    }
    
    .blog-details-content{
        width: 100%;
        max-width: 1250px;
        margin: 50px auto;
        position: relative;
        
        .content-right{
            width: 25%;
            height: 200px;
            position: absolute;
            right: 3%;
            top: 0px;
            
            .right-bg{
                width: 75%;
                height: 260px;
                background: #FAFAFA;
                border-radius: 15px;
                padding: 30px 30px;
                position: relative;
                display: none;
            }    
        } 
    } 
}

@media screen and (max-width:768px){
    .blog-details-banner{
        width: 100%;
        margin: 0 auto;
        
        .banner-main{
            position: relative;
            background:url(../img/blog-details-banner5.jpg) ;
            background-size: 100% auto;
            width: 100%;
            height: 500px;
            margin: 0 auto;
            
            .main-pre{
              position: absolute;
              top: 50%;
              margin-top: -20px;
              left: 30px;  
              width: 40px;
              height: 60px;
              z-index: 10;
              background: url(../img/icon-arrow.png) 0px 0px;
              cursor: pointer;
            }
            
            .main-next{
              position: absolute;
              top: 50%;
              margin-top: -20px;
              right: 30px;  
              width: 40px;
              height: 60px;
              z-index: 10;
              background: url(../img/icon-arrow.png) -38px 0px;
              cursor: pointer;
            }
        }
    }
    
    .blog-details-content{
        width: 100%;
        max-width: 1250px;
        margin: 50px auto;
        position: relative;
        
        .content-left{
            width: 80%;
            margin: 0 auto;
            
            .left-center{
                width: 82%;
                margin: 30px auto;
                padding: 20px 0px;
                position: relative;
                
                .blog-details-p p{
                    font-size: 16px;
                    color: #00C0F1;
                    line-height: 24px;
                } 
            }
        }
        
        .content-right{
            width: 25%;
            height: 200px;
            position: absolute;
            right: 3%;
            top: 0px;
            display: none; 
        }
        
        .content-left span{
            font-size: 16px;
            color: #31364C;
        }
    }
}

@media screen and (max-width:570px){
    .blog-details-banner{
        width: 100%;
        margin: 0 auto;
        
        .banner-main{
            position: relative;
            background:url(../img/blog-details-banner5.jpg) ;
            background-size: 100% auto;
            width: 100%;
            height: 500px;
            margin: 0 auto;
            
            .main-pre{
              position: absolute;
              top: 50%;
              margin-top: -40px;
              left: 10px;  
              width: 40px;
              height: 60px;
              z-index: 10;
              background: url(../img/icon-arrow.png) 0px 0px;
              cursor: pointer;
            }
            
            .main-next{
              position: absolute;
              top: 50%;
              margin-top: -40px;
              right: 10px;  
              width: 40px;
              height: 60px;
              z-index: 10;
              background: url(../img/icon-arrow.png) -38px 0px;
              cursor: pointer;
            }
            
            .main-cycle li{
                float: left;
                width: 8px;
                height: 8px;
                border-radius: 100%;
                border: 1px solid white;
                margin-right: 10px;
                cursor: pointer;
            }
        }
    }
}
